// 章节知识要点数据配置

// 第1章数据（原有数据）
export const chapter1Data = {
  title: '第1章 学习要点',
  leftSection: {
    title: '前端技术发展脉络',
    icon: 'lightning',
    subsections: [
      {
        title: '概念演进',
        color: 'bg-orange-400',
        type: 'list',
        items: ['"端"的含义：物理+逻辑', '前端内涵：界面+体验']
      },
      {
        title: '发展阶段',
        color: 'bg-green-400',
        type: 'stages',
        items: [
          { name: 'Web原生期 (1995-2009)', color: 'text-blue-600' },
          { name: 'SPA框架期 (2010-2018)', color: 'text-green-600' },
          { name: '全栈整合期 (2019-今)', color: 'text-purple-600' }
        ]
      },
      {
        title: '架构演进',
        color: 'bg-purple-400',
        type: 'list',
        items: ['单体架构', '前后端分离', '微服务/云原生']
      }
    ]
  },
  rightSection: {
    title: '课程学习体系',
    icon: 'book',
    subsections: [
      {
        title: '学习路径：BR-2-USA',
        color: 'bg-blue-400',
        type: 'path',
        items: [
          {
            label: 'B',
            description: 'Vue.js基础',
            bgColor: 'bg-blue-100',
            textColor: 'text-blue-800'
          },
          {
            label: 'R',
            description: 'Vue Router路由',
            bgColor: 'bg-green-100',
            textColor: 'text-green-800'
          },
          {
            label: '2',
            description: 'Tailwind + Vite工具',
            bgColor: 'bg-yellow-100',
            textColor: 'text-yellow-800'
          },
          {
            label: 'U',
            description: 'Element Plus UI',
            bgColor: 'bg-purple-100',
            textColor: 'text-purple-800'
          },
          {
            label: 'S',
            description: 'Pinia状态管理',
            bgColor: 'bg-pink-100',
            textColor: 'text-pink-800'
          },
          {
            label: 'A',
            description: 'Axios网络请求',
            bgColor: 'bg-indigo-100',
            textColor: 'text-indigo-800'
          }
        ]
      },
      {
        title: '学习方法',
        color: 'bg-orange-400',
        type: 'list',
        items: ['项目驱动学习', 'AI辅助编程', '理论+实践结合']
      },
      {
        title: '考核体系',
        color: 'bg-red-400',
        type: 'percentage',
        items: [
          { name: '平时成绩', value: '40%', color: 'text-blue-600' },
          { name: '项目作业', value: '30%', color: 'text-green-600' },
          { name: '期末考试', value: '30%', color: 'text-purple-600' }
        ]
      }
    ]
  },
  tip: {
    label: '学习建议',
    content:
      '建议按照BR-2-USA路径循序渐进学习，每个阶段都要动手实践，理论与实践相结合，充分利用AI工具提升学习效率。'
  }
}

// 第2章数据（前端开发环境搭建和主要工具使用）
export const chapter2Data = {
  title: '第2章 学习要点',
  leftSection: {
    title: '前端开发环境介绍',
    icon: 'cog',
    subsections: [
      {
        title: 'Git的基本使用',
        color: 'bg-orange-400',
        type: 'list',
        items: ['Git原理和基本使用', 'VS Code中使用Git', '提交本地代码到远程仓库']
      },
      {
        title: 'Npm的基本使用',
        color: 'bg-green-400',
        type: 'list',
        items: ['Npm基本命令', 'Npm镜像设置', '包管理和依赖安装']
      },
      {
        title: 'VS Code基本使用',
        color: 'bg-purple-400',
        type: 'list',
        items: ['菜单和基本布局', '全局搜索框', '主侧栏的使用', '配置和快捷键']
      }
    ]
  },
  rightSection: {
    title: '开发工具与插件',
    icon: 'book',
    subsections: [
      {
        title: 'VS Code插件',
        color: 'bg-blue-400',
        type: 'list',
        items: ['前端相关插件安装', 'AI插件集成', '代码格式化工具', '调试和预览插件']
      },
      {
        title: '环境搭建要点',
        color: 'bg-orange-400',
        type: 'list',
        items: ['Node.js环境安装', 'Git版本控制配置', 'VS Code安装', '浏览器的安装']
      },
      {
        title: '实践技能',
        color: 'bg-red-400',
        type: 'list',
        items: ['创建和管理项目', '代码版本控制', '包依赖管理', '开发调试技巧']
      }
    ]
  },
  tip: {
    label: '环境搭建建议',
    content:
      '按照课程指导逐步完成开发环境搭建，熟练掌握Git、Npm、VS Code等基础工具的使用，为后续开发打下坚实基础。'
  }
}

// 第3章数据（Vue.js基础入门）
export const chapter3Data = {
  title: '第3章 学习要点',
  leftSection: {
    title: '如何在HTML中激活Vue功能',
    icon: 'lightning',
    subsections: [
      {
        title: '环境准备',
        color: 'bg-blue-400',
        type: 'list',
        items: ['创建HTML基础结构', '引入Vue.js库文件（CDN或本地文件）', '准备挂载点元素(div#app)']
      },
      {
        title: '应用创建(Vue实例)',
        color: 'bg-green-400',
        type: 'list',
        items: [
          '创建Vue应用实例：const { createApp } = Vue',
          '定义应用配置对象：setup() { ... }',
          '挂载到DOM元素：createApp(App).mount("#app")'
        ]
      }
    ]
  },
  rightSection: {
    title: 'Vue框架核心特性',
    icon: 'book',
    subsections: [
      {
        title: 'Vue框架特点',
        color: 'bg-purple-400',
        type: 'list',
        items: [
          '渐进式：可以逐步采用，不需要重写整个应用',
          '响应式：数据变化自动更新视图',
          '声明式编程：描述想要的结果，而非实现过程',
          'MVVM设计模式：Model-View-ViewModel架构'
        ]
      },
      {
        title: '组件化编程思想',
        color: 'bg-orange-400',
        type: 'list',
        items: [
          '将UI拆分为独立、可复用的组件',
          '组件封装了HTML、CSS和JavaScript',
          '组件间通过props和events通信',
          '提高代码的可维护性和复用性'
        ]
      },
      {
        title: 'Vue组件API风格',
        color: 'bg-red-400',
        type: 'comparison',
        items: [
          {
            name: '选项式API',
            description: '使用data、methods、computed等选项，适合初学者',
            color: 'text-blue-600'
          },
          {
            name: '组合式API',
            description: '使用setup()函数和组合函数，更灵活适合复杂逻辑',
            color: 'text-green-600'
          }
        ]
      }
    ]
  },
  tip: {
    label: 'Vue学习建议',
    content:
      '从基础的HTML激活Vue开始，逐步理解Vue的渐进式特性和响应式原理，掌握组件化编程思想，熟悉选项式和组合式API的使用场景。'
  }
}

// 第5章数据（Vue事件处理）
export const chapter5Data = {
  title: '第5章 学习要点',
  leftSection: {
    title: 'DOM事件流与Vue事件绑定语法',
    icon: 'lightning',
    subsections: [
      {
        title: '1. DOM事件流',
        color: 'bg-blue-400',
        type: 'stages',
        items: [
          { name: '捕获阶段', description: '从根元素向下', color: 'text-blue-600' },
          { name: '目标阶段', description: '到达目标元素', color: 'text-green-600' },
          { name: '冒泡阶段', description: '从目标向上冒泡', color: 'text-purple-600' }
        ]
      },
      {
        title: '2. Vue事件绑定语法',
        color: 'bg-green-400',
        type: 'list',
        items: [
          'v-on:click="handler" ↔ @click="handler"',
          '内联处理器: @click="count++"',
          '方法处理器: @click="handleClick"',
          '内联调用: @click="handleClick($event, \'param\')"'
        ]
      },
      {
        title: '3. 事件对象详情',
        color: 'bg-yellow-400',
        type: 'list',
        items: [
          'event.target → 触发事件的元素',
          'event.currentTarget → 绑定事件的元素',
          'event.type → 事件类型(click, keyup等)',
          'event.preventDefault() → 阻止默认行为',
          'event.stopPropagation() → 阻止事件冒泡'
        ]
      },
      {
        title: '4. 事件对象传参',
        color: 'bg-cyan-400',
        type: 'list',
        items: [
          '自动传递: @click="handler" → handler(event)',
          '手动传递: @click="handler($event)" → 显式传递',
          '混合传参: @click="handler($event, param)" → 事件+参数',
          '多参数: @click="handler(param1, $event, param2)" → 灵活位置'
        ]
      },
      {
        title: '5. 修饰符语法',
        color: 'bg-yellow-600',
        type: 'list',
        items: [
          '单个修饰符: @click.stop="handler"',
          '组合修饰符: @click.stop.prevent="handler"',
          '键盘组合: @keyup.enter.ctrl="handler"',
          '执行顺序: 修饰符从左到右依次执行'
        ]
      }
    ]
  },
  rightSection: {
    title: 'Vue事件处理函数&事件修饰符',
    icon: 'cog',
    subsections: [
      {
        title: '1. 三种写法',
        color: 'bg-orange-400',
        type: 'list',
        items: [
          '内联处理器: @click="count++"',
          '方法处理器: @click="handleClick"',
          '内联调用: @click="handleClick($event, \'param\')"'
        ]
      },
      {
        title: '2. 参数传递',
        color: 'bg-purple-400',
        type: 'list',
        items: ['自动传递: event对象', '手动传递: $event + 自定义参数', '多参数: 多个自定义参数']
      },
      {
        title: '3. 返回值',
        color: 'bg-pink-400',
        type: 'list',
        items: ['return false → 阻止默认行为', 'return true → 允许默认行为', '无返回值 → 正常执行']
      },
      {
        title: '4. Vue事件修饰符',
        color: 'bg-indigo-400',
        type: 'modifiers',
        items: [
          {
            category: '事件修饰符',
            modifiers: '.stop .prevent .capture .self .once',
            color: 'text-indigo-600'
          },
          {
            category: '键盘修饰符',
            modifiers: '.enter .tab .delete .esc .space',
            color: 'text-blue-600'
          },
          {
            category: '系统修饰符',
            modifiers: '.ctrl .alt .shift .meta',
            color: 'text-purple-600'
          },
          { category: '鼠标修饰符', modifiers: '.left .right .middle', color: 'text-pink-600' }
        ]
      }
    ]
  },
  tip: {
    label: '事件处理建议',
    content:
      '掌握DOM事件流机制，熟练使用Vue事件语法的三种写法，理解参数传递和返回值的作用，熟练运用各种事件修饰符提高开发效率，通过实际案例加深对事件处理的理解。'
  }
}

// 第4章数据（Vue模板指令）
export const chapter4Data = {
  title: '第4章 学习要点',
  leftSection: {
    title: 'Vue模板语法',
    icon: 'lightning',
    subsections: [
      {
        title: '模板插值',
        color: 'bg-blue-400',
        type: 'list',
        items: ['{{ }} 双大括号语法', 'v-text 文本插值', 'v-html HTML插值', 'v-once 一次性插值']
      },
      {
        title: '表单数据绑定',
        color: 'bg-green-400',
        type: 'list',
        items: ['v-model 双向绑定', 'input文本框', 'radio单选框', 'checkbox复选框']
      },
      {
        title: '条件渲染',
        color: 'bg-yellow-400',
        type: 'list',
        items: [
          'v-if="条件" 条件为真时渲染',
          'v-else-if="条件" 多重条件',
          'v-else 否则渲染',
          'v-show="条件" 控制显示隐藏'
        ]
      },
      {
        title: '列表渲染',
        color: 'bg-teal-400',
        type: 'list',
        items: [
          'v-for="item in list" 遍历数组',
          'v-for="(item, index) in list" 获取索引',
          'v-for="(value, key) in object" 遍历对象',
          ':key="唯一标识" 性能优化'
        ]
      },
      {
        title: '性能对比',
        color: 'bg-pink-400',
        type: 'list',
        items: ['v-if: 条件切换创建/销毁元素', 'v-show: 始终渲染，切换CSS display']
      }
    ]
  },
  rightSection: {
    title: 'Vue事件绑定',
    icon: 'cog',
    subsections: [
      {
        title: 'v-on指令',
        color: 'bg-orange-400',
        type: 'list',
        items: ['v-on:click="方法名"', '@click="方法名" (简写)', '内联处理器']
      },
      {
        title: '事件修饰符',
        color: 'bg-red-400',
        type: 'list',
        items: [
          '.prevent 阻止默认行为',
          '.stop 阻止事件冒泡',
          '.enter 键盘修饰符',
          '.once 只触发一次'
        ]
      },
      {
        title: '事件处理方法',
        color: 'bg-indigo-400',
        type: 'list',
        items: ['方法定义', '参数传递', '事件对象获取']
      },
      {
        title: '待办事项交互',
        color: 'bg-pink-400',
        type: 'list',
        items: ['添加新任务点击', '回车键添加点击', '删除任务点击', '输入验证']
      }
    ]
  },
  tip: {
    label: 'Vue指令学习建议',
    content:
      '掌握Vue模板语法是构建动态界面的基础，重点理解双向数据绑定、事件处理和条件渲染的使用场景，通过待办事项等实际案例加深理解。'
  }
}

// 导出所有章节数据
export const chapterHighlights = {
  chapter1: chapter1Data,
  chapter2: chapter2Data,
  chapter3: chapter3Data,
  chapter4: chapter4Data,
  chapter5: chapter5Data
}

// 根据章节号获取数据的辅助函数
export function getChapterData(chapterNumber) {
  const chapterKey = `chapter${chapterNumber}`
  return chapterHighlights[chapterKey] || chapter1Data
}
